<template>
	<div class="lietou-list content">
		<div class="lietou-right">
			<el-form ref="form" :inline="true" label-width="60px" size="small">
				<el-form-item label="手机号" label-width="80px">
					<el-input placeholder="请输入手机号" v-model="searchPhone" maxlength="11" clearable class="search-input"></el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input placeholder="请输入姓名" v-model="nickname" clearable class="search-input"></el-input>
				</el-form-item>
				<el-form-item style="margin:-2px 0 0 10px;">
					<el-button icon="el-icon-search" @click="searchData" class="buttonStyle">搜索</el-button>
					<el-button icon="el-icon-plus" class="buttonStyle buttonStyle2" @click="addHandle">添加</el-button>
				</el-form-item>
			</el-form>
			<el-table header-row-class-name="my-table-header" :data="tableData" class="answerTable" style="width: 100%;"
			 :header-cell-style="{ background: '#eee',color:'#555555'}" stripe :row-style="{height:'54px'}"
			 :highlight-current-row="true">
				<el-table-column fixed type="index" label="序列" width="80" column-key="id" align="center"></el-table-column>
				<el-table-column prop="username" label="手机号码" align="center"></el-table-column>
				<el-table-column prop="realname" label="姓名" align="center"></el-table-column>
				<el-table-column prop="title" label="职位" align="center"></el-table-column>
				<el-table-column prop="create_time" label="添加日期" align="center"></el-table-column>
				<el-table-column align="center" label="操作" width="150">
					<template slot-scope="scope">
					  <el-button size="small" class="buttonStyle" v-if="scope.row.user_status==1" @click="handleClose(scope.row.id, scope.row.user_status)">停用</el-button>
					  <el-button size="small" class="buttonStyle buttonStyle2" v-else @click="handleClose(scope.row.id, scope.row.user_status)">启用</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-row type="flex" class="row-bg" justify="center" v-show="pageCount>1">
				<el-col :span="24" style="text-align:center;margin-top:50px">
					<el-pagination background layout="prev, pager, next" :page-size="pageSize" :page-count="pageCount" :current-page="pageNo"
					 @current-change="pageChange">
					</el-pagination>
				</el-col>
			</el-row>
		</div>

		<el-dialog title="添加内部管理员" :visible.sync="showAddWin" class="form">
			<el-form :model="form" :rules="rules" autocomplete="on" label-width="140px" ref="form">
			  <el-form-item label="管理员姓名：" prop="username">
				 <el-input v-model="form.username" autocomplete="on" placeholder="请输入管理员姓名" clearable></el-input>
			  </el-form-item>
			  <el-form-item label="管理员手机号码："  prop="phone">
				 <el-input v-model="form.phone" autocomplete="on" maxlength="11" clearable placeholder="请输入手机号"></el-input>
			  </el-form-item>
			  <el-form-item label="管理员职位："  prop="position">
				 <el-input v-model="form.position" autocomplete="on" clearable placeholder="请输入管理员职位"></el-input>
			  </el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
			  <el-button @click="showAddWin = false">取 消</el-button>
			  <el-button type="primary" @click="onSubmitPwd">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { validUsername } from '@/utils/validate'
	export default {
		name: 'InnerManage',
		computed: {
			...mapGetters([
				'token'
			])
		},
		data() {
			const validateUsername = (rule, value, callback) => {
				if (value.length < 1) {
					callback(new Error('管理员名称不能为空！'))
				} else {
					callback()
				}
			}
			const validatePosition = (rule, value, callback) => {
				if (value.length < 1) {
					callback(new Error('管理员职位不能为空！'))
				} else {
					callback()
				}
			}
			const validatePassword = (rule, value, callback) => {
			  if (!validUsername(value)) {
				callback(new Error('请输入正确的手机号'))
			  } else {
				callback()
			  }
			}
			return {
				searchPhone: '',
				nickname:'',
				tableData: [], //表格数据
				pageCount: 0,
				pageNo: 1,
				pageSize: 10,
				form:{
					username: '',
					phone: '',
					position:''
				},
				rules: {
					username: [{ required: true, trigger: 'blur', validator: validateUsername }],
					phone: [{ required: true, trigger: 'blur', validator: validatePassword }],
					position: [{ required: true, trigger: 'blur', validator: validatePosition }],
				},
				showAddWin: false //弹框的显示和隐藏
			}
		},
		watch:{
		  //  '$route': function(newUrl,oldUrl){
				// if(oldUrl.name=='lietouList'){ //详情页面返回的
				// 	if(oldUrl.params.refresh){
				// 	  this.loadData();
				// 	}
				// }
		  //  }
		},
		async created() {
		   this.loadData();
		},
		methods:{
			// 搜索
			searchData(){
				this.pageNo=1;
				this.loadData();
			},
			//分页
			pageChange(val) {
			  this.pageNo = val;
			  this.loadData()
			},
			async loadData() {
			  const loading = this.$loading({
			    lock: true,
			    text: 'Loading',
			    spinner: 'el-icon-loading',
			    background: 'rgba(0, 0, 0, 0.5)'
			  });
			  try {
			   let data = {
			      "token": this.token,
			      "realname": this.nickname,
			      "mobile": this.searchPhone,
			      "p": this.pageNo,//分页页码
			      "size": this.pageSize,//分页每页数量
			    }
			    let res = await this.$http({
			      url: '/man/admin/getList',
			      method: 'post',
			      params: data
			    });
			    this.tableData = res.data;
			    this.pageCount = res.max_page; //总页数
			    this.pageNo = Number(res.p); //当前页 size当前页
			    loading.close();
			  } catch (e) {
			    console.log(e)
			    loading.close();
			  }
			},

			// 启用停用i
			handleClose(id, val){
				let tips = val==1?'确定停用该管理员？':'确定启用该管理员？';
				this.$confirm(tips, '操作确认', {
					 confirmButtonText: '确定',
					 cancelButtonText: '取消',
					 type: 'warning',
					 closeOnClickModal: false
				}).then(async value => {
					try {
						let res = await this.$http({
							url: '/man/admin/setInfo',
							method: 'post',
							params: {
								"token": this.token,
								"id": id,
								"mobile":'',
								"realname":'',
								"title":	'',	
								"user_status":val==1?-1:1,	//	是否停用 1 启用 -1 停用	
								"password":''
							}
						});
						this.$message({
							type: 'success',
							message: res.msg
						});
						this.loadData();
					} catch (e) {
						console.log(e)
					}
				}).catch(() => {
					
				});
			},
			// 添加
			addHandle(){
				this.showAddWin = true;
			},
			// 确定添加
			onSubmitPwd(){
				this.$refs.form.validate(async valid => {
					if(valid){
						const loading = this.$loading({
							lock: true,
							text: 'Loading',
							spinner: 'el-icon-loading',
							background: 'rgba(0, 0, 0, 0.5)'
						});
						try {
							let res = await this.$http({
								url: '/man/admin/setInfo',
								method: 'post',
								params: {
									"token": this.token,
									"id": '',
									"mobile": this.form.phone,
									"realname": this.form.username,
									"title":	this.form.position,	
									"user_status": 1,	//	是否停用 1 启用 -1 停用	
									"password": '123456'
								}
							});
							this.$message({
								type: 'success',
								message: res.msg
							});
							this.showAddWin = false;
							this.loadData();
						} catch (e) {
							console.log(e)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.el-button.buttonStyle{
	  height: 32px;
	  font-size: 14px;
	  font-family: PingFangSC-Medium, PingFang SC;
	  font-weight: 500;
	  color: #FFFFFF;
	  background:#3674FF;
	  border-radius: 5px;
	  border:0;
	  margin-left:6px;
	  margin-top:2px;
	}
	.answerTable{
		margin-top:15px;
	}
	.lietou-right{
		margin-top:30px;
	}
  .el-button.buttonStyle2{
    background:#13ce66;
  }
</style>
<style>
	.el-message{
		top:120px !important;
	}
</style>